package myJs.projectCps.enrichBarPlot

import cats.effect.SyncIO
import com.softwaremill.quicklens._
import myJs.cps._
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import myJs.tool.Tool.messages

import scala.collection.immutable.SeqMap
import myJs.Implicits._

/** Created by yz on 3/11/2020
  */
object ColorCp {

  val plotO = Cp.plotO

  case class Props(
      basicData: plotO.ColorData,
      basicDataChange: (plotO.ColorData => plotO.ColorData) => SyncIO[Unit]
  ){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>

    object FTool {

      def strChange(f: PathLazyModify[plotO.ColorData, String]) = (v: String) => {
        props.basicDataChange {
          f.setTo(v)
        }
      }

      def delete(curI: Int) = {
        props.basicDataChange { x =>
          x.modify(_.customColors).using(y => y.removedByI(curI))
        }
      }

      def add = {
        props.basicDataChange { x =>
          x.modify(_.customColors).using { y =>
            y :+ "#E41A1C"
          }
        }
      }

    }

    val basicData = props.basicData
    val optionMap = SeqMap(
      "#FF0000:#FFFF00" -> s"${messages("red")}-${messages("yellow")}",
      "custom" -> s"${messages("setColorManually")}"
    )
    val canDelete = (basicData.customColors.size > 2)
    val canAdd = (basicData.customColors.size < 6)

    Fragment(
      SelectInlineCp
        .Props(
          value = basicData.colorsStr,
          label = messages("fillColors"),
          name = "colorsStr",
          optionMap = optionMap,
          onChange = FTool.strChange(modifyLens[plotO.ColorData](_.colorsStr)),
          labelWidth = 4,
          inputWidth = 8
        )
        .render,
      if (basicData.colorsStr == "custom") {
        div(
          border := "1px solid lightgrey",
          borderRadius := "5px",
          padding := "10px 5px",
          marginBottom := "10px",
          h5(marginBottom:=15.px,s"${messages("selectColor")}"),
          basicData.customColors.zipWithIndex.toVdomArray { case (color, curI) =>
            div(
              key := s"${curI}",
              className := "form-group eachColor",
              label(className := "control-label col-sm-2"),
              div(
                className := "col-sm-6",
                PureMiniColorCp
                  .Props(
                    value = color,
                    onChange = FTool.strChange(modifyLens[plotO.ColorData](_.customColors.index(curI))),
                    name = s"color.${curI}"
                  )
                  .render
              ),
              div(
                className := "col-sm-4",
                button(
                  width := "100%",
                  `type` := "button",
                  title := "删除",
                  disabled := (!canDelete),
                  onClick --> FTool.delete(curI),
                  className := "btn btn-default btn-block deleteButton",
                  i(className := "fa fa-trash"),
                  " ",
                  messages("delete")
                )
              )
            )
          },
          div(
            className := "form-group",
            div(
              className := "actions col-sm-offset-2 col-sm-6",
              button(
                `type` := "button",
                className := "btn btn-default myAddGroup",
                title := s"${messages("add")}",
                onClick --> FTool.add,
                disabled := (!canAdd),
                i(className := "fa fa-plus", s" ${messages("add")}")
              )
            )
          )
        )
      } else EmptyVdom,
    )

  }

}
